<route lang="json5" type="page">
{
  layout: "tabbar",
  style: {
    navigationStyle: "custom",
    navigationBarTitleText: "广场",
  },
}
</route>

<template>
  <view class="overflow-hidden plaza-container">
    <view class="plaza-bg"></view>
    <view
      class="plaza-title"
      :style="{
        paddingTop: safeAreaInsets?.top ? safeAreaInsets.top + 'px' : '40px',
        height: safeAreaInsets?.top ? 'auto' : '88rpx',
      }"
      >广场</view
    >
    <view class="plaza-inner">
      <view>
        <!-- <view class="flex justify-between items-center mb-20rpx">
            <view class="text-#010204 text-36rpx font-bold">成员社群内容</view>
          </view> -->
        <scroll-view scroll-y class="h-screen" :show-scrollbar="false">
          <!-- 两列布局容器 -->
          <view class="flex flex-wrap justify-between px-20rpx">
            <!-- 遍历数据 -->
            <view
              v-for="item in plazaList"
              :key="item.id"
              class="w-[48%] mb-20rpx"
            >
              <!-- 单个卡片容器 -->
              <view
                class="h-[482rpx] rounded-24rpx relative overflow-hidden"
                @click="handleClick(item)"
              >
                <!-- 图片 -->
                <image
                  class="w-full h-full"
                  :src="item.coverImage?.split(',')[0]"
                  mode="aspectFill"
                />

                <!-- 底部信息栏 -->
                <view
                  class="h-150rpx text-white text-shandow p-2 bg-black bg-opacity-20 absolute bottom-0 left-0 right-0 bg-[rgba(0,0,0,0.31)] p-20rpx"
                >
                  <view class="flex items-center justify-between">
                    <view class="text-36rpx truncate">{{ item.title }}</view>
                    <view
                      class="text-16rpx bg-black px-10rpx py-10rpx rounded-10rpx min-w-80rpx text-center"
                    >
                      {{ item.commentCount }}人评论
                    </view>
                  </view>
                  <view class="text-24rpx pt-8rpx truncate">
                    {{
                      item?.description
                        .replace(/<[^>]+>/g, "") // 去除所有HTML标签
                        .slice(0, 12) + // 截取前12个字符
                      (item?.description.replace(/<[^>]+>/g, "").length > 12
                        ? "..."
                        : "")
                    }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getActivityParticipationList } from "@/service/plaza";
const { safeAreaInsets } = uni.getSystemInfoSync();
const plazaList = ref<any>([]);
const getList = async () => {
  try {
    const showData: any = await getActivityParticipationList({
      current: "1",
      size: "1000",
    });
    plazaList.value = showData.data.records;
  } catch (error) {}
};
const handleClick = (item: any) => {
  uni.navigateTo({
    url: `/pages-sub/squareDetail/index?id=${item.id}`,
  });
};
onShow(async () => {
  getList();
});
</script>

<style lang="scss" scoped>
.plaza-container {
  position: relative;
  min-height: 100vh;
  padding-bottom: 30rpx;
  background: #fff;
  .plaza-bg {
    position: relative;
    z-index: 1;
    width: 350rpx;
    height: 350rpx;
    margin-top: -10rpx;
    margin-left: -20rpx;
    background: #e0ffb5;
    filter: blur(300rpx);
    border-radius: 350rpx;
  }
  .plaza-title {
    position: absolute;
    top: 40rpx;
    left: 40rpx;
    z-index: 2;
    font-size: 52rpx;
    font-weight: bold;
    color: #1a1a1a;
  }
  .plaza-inner {
    padding: 0 32rpx;
    margin-top: -80rpx;
    font-size: 52rpx;
    color: #1a1a1a;
  }
  .plaza-view {
    box-sizing: border-box;
    padding: 20rpx;
    padding-top: 10rpx;
    border-bottom-right-radius: 24rpx;
    border-bottom-left-radius: 24rpx;
  }
  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }
}
</style>
